<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Greedy Ball</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script>

        $(document).ready(function () {
            game();
        });

        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var width = 960,height = 353;
        var backgroundGraph = new Image ();
        backgroundGraph.src = "../img/background.jpeg";
        //创建三个球对象
        var greedyBall = { "radius":15 }
        var blueBall = { "radius":5 }
        var greenBall = { "radius":5 }
        //随机摆放小球
        ballRandom(greedyBall);
        ballRandom(blueBall);
        ballRandom(greenBall);

        //向 window 添加事件监听
        window.addEventListener("load",drawGame,true);

        //绘制游戏界面
        function drawGame() {
            drawBackground();
            drawBall(greedyBall);
            drawBall(blueBall);
            drawBall(greenBall);
        }
        //绘制游戏背景
        function drawBackground() {
            context.clearRect(0,0,width,height);                    //清空画布
            context.drawImage(backgroundGraph,0,0,960,353);         //插入背景图
        }
        //绘制游戏主体：球
        function drawBall(Ball) {
            context.fillStyle=Ball.color;                           //填充颜色
            context.beginPath();                                    //重置绘制路径
            context.arc(Ball.x,Ball.y,Ball.radius,0,Math.PI*2,true);//绘制圆形
            context.fill();                                         //填充当前图像
        }
        //检测方向按键
        function pressKey(event) {
            switch (event.keyCode) {
                case 37:
                    move("left");
                    break;
                case 38:
                    move("up");
                    break;
                case 39:
                    move("right");
                    break;
                case 40:
                    move("down");
                    break;
            }
        }
        //移动贪吃球
        function move(direc) {
            switch (direc) {
                case "left":
                    greedyBall.x -=8;
                    break;
                case "right":
                    greedyBall.x +=8;
                    break;
                case "up":
                    greedyBall.y -=8;
                    break;
                case "down":
                    greedyBall.y +=8;
                    break;
            }
            isImpact();
            drawGame();
        }
        //碰撞检测
        function isImpact() {
            if ((greedyBall.x - blueBall.x) * (greedyBall.x - blueBall.x) + (greedyBall.y-blueBall.y) * (greedyBall.y - blueBall.y)
            <= (greedyBall.radius + blueBall.radius) * (greedyBall.radius + blueBall.radius)) {
                ballRandom(blueBall);
                greedyBall.radius += 5;
                drawBall(greedyBall);
            } 
            if ((greedyBall.x - greenBall.x) * (greedyBall.x - greenBall.x) + (greedyBall.y-greenBall.y) * (greedyBall.y - greenBall.y)
            <= (greedyBall.radius + greenBall.radius) * (greedyBall.radius + greenBall.radius)) {
                ballRandom(greenBall);
                greedyBall.radius += 5;
                drawBall(greedyBall);
            } 
        }
        //设置随机生成小球
        function ballRandom(ball) {
            ball.x = Math.random();
            ball.x = Math.ceil(ball.x * 960);
            ball.y = Math.random();
            ball.y = Math.ceil(ball.y * 353);
            ball.color = Math.random();
            ball.color = Math.ceil(ball.color * 0xffffff);
            ball.color = '#' + Math.floor(ball.color).toString(16);
        }
    </script>

</head>

<body onkeydown="pressKey(event)">
    <div id="bigContainer" align="center">
    创建画布
    <canvas id="myCanvas" width="960" height="353" style="border:2px solid dimgray;">
            你的浏览器不支持该功能
        </canvas>
    </div> 
    <p>如果你点我，我就会消失。</p>

</body>

</html>